<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="utf-8" />
  <title>主页</title>
</head>

<body>
  <!-- 简单导航 -->
  <div>
    <p>简单导航</p>
    <ul>
      <li>Home</li>
      <li><a href="pictures.html">Pictures</a></li>
      <li><a href="projects.html">Projects</a></li>
      <li><a href="social.html">Social</a></li>
    </ul>
    <a href="mailto:houjie_jack@outlook.com">联系作者(邮件)</a>
    <hr />
    <br />
  </div>
  <!-- 入门部分 -->
  <div>
    <p>入门部分</p>
    <h1>主要功能</h1>
    <p>
      <a href="Image Gallery.html" title="开灯关灯" target="_blank">开灯关灯</a>
      <strong>网页模拟</strong>
    </p>
    <p><img src="./images/on.gif" alt="开灯效果图" /></p>
    <p>日语测试： ご飯が熱い。</p>
    <hr />
    <br />
  </div>
  <!-- 标题与正文部 -->
  <div>
    <p>标题与正文部分</p>
    <h2>静夜思</h2>
    <p>床前明月光</p>
    <p>疑是地上霜</p>
    <p>举头望明月</p>
    <p>低头思故乡</p>
    <hr />
  </div>
  <!-- 列表部分 -->
  <div>
    <p>列表部分</p>
    <ul>
      <li>豆浆</li>
      <li>油条</li>
      <li>豆腐脑</li>
      <li>油饼</li>
    </ul>
    <br />
    <ol>
      <li>沿着条路走到头</li>
      <li>右转</li>
      <li>直行穿过第一个十字路口</li>
      <li>在第三个十字路口处左转</li>
      <li>继续走 300 米，学校就在你的右手边</li>
    </ol>
    <br />
    <h3 id="宫保鸡丁做法">宫保鸡丁的做法</h3>
    <p>
      宫保鸡丁，川菜系中的传统名菜，由鸡丁、干辣椒、花生米等炒制而成。由于其入口鲜辣，鸡肉的鲜嫩配合花生的香脆，广受大众欢迎。
    </p>
    <p>
      相传宫保鸡丁是清朝光绪年间的署理四川总督丁宝桢所发明，是他招待客人时叫家厨煮的菜肴。由于丁宝桢后来被封为东宫少保（太子少保），所以被称为“丁宫保”，而这道菜亦被称为“宫保鸡丁”
    </p>
    <h4>原料</h4>
    <ul>
      <li>去骨鸡胸肉：一斤八两</li>
      <li>干红辣椒：八钱</li>
      <li>炸花生米：一两五钱</li>
      <li>花椒粒：两大匙</li>
      <li>葱：两根（切段）</li>
      <li>蛋白：一个</li>
      <li>淀粉：三大匙</li>
      <li>酱油：两大匙</li>
      <li>蒜末：半茶匙</li>
      <li>白醋：一茶匙</li>
      <li>色拉油：适量</li>
      <li>盐：两茶匙</li>
    </ul>
    <h4>做法</h4>
    <ol>
      <li>
        先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀，调成“腌料”，鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀，腌渍半小时。
      </li>
      <li>
        用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀，调成“综合调味料”。
      </li>
      <li>
        鸡丁腌好以后，色拉油下锅烧热，先将鸡丁倒入锅内，用大火快炸半分钟，炸到变色之后，捞出来沥干油汁备用。
      </li>
      <li>
        在锅里留下约两大匙油，烧热后将切好的干辣椒下锅，用小火炒香后，再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅，用大火快炒片刻后，再倒入“综合调味料”继续快炒。
        <ul>
          <li>
            如果你采用正宗川菜做法，最后只需加入花生米，炒拌几下就可以起锅了。
          </li>
          <li>如果你在北方，可加入黄瓜丁、胡萝卜丁和花生米，翻炒后起锅。</li>
        </ul>
      </li>
    </ol>

    <h4>大千鸡</h4>
    <p>
      <a href="www.baidu.com/" title="张大千百度百科" target="_blank">张大千</a>居加拿大期间，曾按自己喜好改变<a
        href="index.html#宫保鸡丁做法">宫保鸡丁的做法</a>，并传授当地厨师，厨师将之命名为“大千鸡”，以兹纪念。大千鸡与宫保鸡丁不同之处，是使用经细工去皮、出骨、剔膜的鸡腿肉，以干辣椒、豆瓣酱为味，而且不用花生。
    </p>
  </div>
  <!-- 描述列表部分 -->
  <div>
    <p>描述列表部分</p>
    <dl>
      <dt>培根</dt>
      <dd>整个世界的粘合剂。</dd>
      <dt>鸡蛋</dt>
      <dd>一块蛋糕的粘合剂。</dd>
      <dt>咖啡</dt>
      <dd>一种浅棕色的饮料。</dd>
      <dd>可以在清晨带来活力。</dd>
    </dl>
    <hr />
    <br />
  </div>
  <!-- 引用部分 -->
  <div>
    <h2>引用部分</h2>
    <p>
      According to the <a href="http://www.baidu.com"><cite>百度主页</cite></a>:
    </p>
    <blockquote cite="www.baidu.com">
      <p>百度搜索引擎</p>
    </blockquote>

    <p>你好！欢迎访问我的激励网页！孔子曰：</p>
    <blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">
      <p>譬如为山，未成一篑，止，吾止也。譬如平地，虽覆一篑，进，吾往也。</p>
    </blockquote>
    <p>
      <q cite="http://www.affirmationsforpositivethinking.com/ ">要保持乐观，不要说泄气的话。</q>（源自
      <a href="http://www.affirmationsforpositivethinking.com/">for Positive Thinking</a>
      。）
    </p>

    <hr />
    <br />
  </div>
  <!-- 其他部分 -->
  <div>
    <p>其他部分</p>

    <!-- 缩略语 -->
    <p><abbr title="美国航天局">NASA</abbr> 做了一些动人心弦的事情。</p>
    <!-- 文档作者 -->
    <address>HTML作者：侯捷</address>
    <!-- 上标下标 -->
    <p>
      a<sub>1</sub><sup>2</sup>+ b<sub>2</sub><sup>2</sup>= c<sub>3</sub><sup>2</sup>
    </p>
    <!-- 计算机代码 -->
    <pre>
          <code>
            const para = document.querySelector('p');
            para.onclick = function() {
              alert('噢，噢，噢，别点我了。');
            };
          </code>
        </pre>
    <p> 请不要使用 <code>&lt;font&gt;</code> 、 <code>&lt;center&gt;</code> 等表象元素。</p>
    <p>在上述的 JavaScript 示例中，<var>para</var> 表示一个段落元素。</p>
    <p>按 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd> 选择全部内容。</p>
    <samp>PING mozilla.org (63.245.215.20): 56 data bytes
      64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp>
    </pre>
    <!-- 时间日期 -->
    <!-- 标准简单日期 -->
    <time datetime="2016-01-20">20 January 2016</time>
    <!-- 只包含年份和月份-->
    <time datetime="2016-01">January 2016</time>
    <!-- 只包含月份和日期 -->
    <time datetime="01-20">20 January</time>
    <!-- 只包含时间，小时和分钟数 -->
    <time datetime="19:30">19:30</time>
    <!-- 还可包含秒和毫秒 -->
    <time datetime="19:30:01.856">19:30:01.856</time>
    <!-- 日期和时间 -->
    <time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
    <!-- 含有时区偏移值的日期时间 -->
    <time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
    <!-- 调用特定的周 -->
    <time datetime="2016-W04">The fourth week of 2016</time>
    <hr />
    <br />
  </div>
  <script src="./Scripts/index.js"></script>
</body>

</html>